<script setup lang="ts" name="myHome">
import { useUser } from "../store/user";
import { useQuestion } from "@/store/question";
import { storeToRefs } from "pinia";
import { computed, ref } from "vue";
import {
  FileControllerService,
  QuestionSubmitVO,
  UserControllerService,
  UserUpdateRequest,
} from "../../generated";
import SubmitPage from "@/components/question/SubmitPage.vue";
import WatchQuestion from "@/components/question/WatchQuestion.vue";
import MyHomeSubmitView from "@/views/quesstion/MyHomeSubmitView.vue";
import { FileItem } from "@arco-design/web-vue";
import message from "@arco-design/web-vue/es/message";

const user = useUser();
const question = useQuestion();
let { loginUser } = storeToRefs(user);
let { submit, questionId } = storeToRefs(question);

let updateUserRequest = ref<UserUpdateRequest>({
  userAvatar: "",
});
const updateAvatar = async () => {
  updateUserRequest.value.id = loginUser.value.id;
  let cancelablePromise = await UserControllerService.updateUserUsingPost(
    updateUserRequest.value
  );
  if (cancelablePromise.code == 0 && cancelablePromise.data == true) {
    message.success("头像上传成功");
    await user.getLoginUser();
  } else {
    message.error("头像上传失败");
  }
};

const data = computed(() => {
  return [
    {
      label: "用户名",
      value: loginUser.value?.userName,
    },
    {
      label: "用户Id",
      value: loginUser.value?.id,
    },
    {
      label: "用户简介",
      value: loginUser.value?.userProfile,
    },
    {
      label: "积分",
      value: loginUser.value?.integral,
    },
    {
      label: "级别",
      value: loginUser.value?.userRole,
    },
  ];
});

const watchSubmit = (record: QuestionSubmitVO) => {
  submit.value = record;
  questionId.value = submit.value.questionId as number;
  handleClick();
};

let visible = ref(false);

const handleClick = () => {
  visible.value = true;
};

const handleOk = async () => {
  visible.value = true;
};
const handleCancel = () => {
  visible.value = false;
};

let visibleModel = ref(false);

const handleClickModel = () => {
  visibleModel.value = true;
};
const handleOkModel = () => {
  visibleModel.value = false;
};
const handleCancelModel = () => {
  visibleModel.value = false;
};

const file = ref();
const Onchange = async (_: any, currentFile: FileItem) => {
  file.value = currentFile;
  console.log(currentFile.file);
  // 发送请求给后端
  const res = await FileControllerService.uploadUsingPost(
    file.value.file,
    "user_avatar"
  );
  if (res.code === 0) {
    updateUserRequest.value.userAvatar = res.data;
    await updateAvatar();
  }
};
</script>

<template>
  <div style="height: 100%; width: 100%">
    <a-row style="height: 100%; width: 100%">
      <a-col :span="8" style="height: 100%" class="left-page">
        <a-avatar class="avatar">
          <img :src="loginUser.userAvatar" />
          <template #trigger-icon>
            <IconEdit
              @click="handleClickModel"
              style="color: orange"
              size="20"
            />
          </template>
        </a-avatar>
        <a-descriptions
          style="margin-top: 20px"
          :data="data"
          :size="'large'"
          title="用户信息"
          :column="1"
        />
      </a-col>
      <a-col :span="16" style="height: 100%" class="right-page">
        <MyHomeSubmitView :watchSubmit="watchSubmit" />
      </a-col>
    </a-row>
  </div>

  <a-drawer
    :visible="visible"
    @ok="handleOk"
    placement="left"
    width="600px"
    @cancel="handleCancel"
  >
    <template #title
      ><i class="iconfont icon-zhihuizhushou-copy-copy" style="color: blue" />
      小梦智慧助手
    </template>
    <SubmitPage v-if="visible" />
    <WatchQuestion v-if="visible" />
  </a-drawer>

  <a-modal
    :visible="visibleModel"
    @ok="handleOkModel"
    @cancel="handleCancelModel"
    okText="Confirm"
    cancelText="Exit"
    unmountOnClose
  >
    <template #title>头像上传</template>
    <div>
      <a-space direction="vertical" :style="{ width: '100%' }">
        <a-upload
          :multiple="false"
          :show-file-list="false"
          :list-type="'picture-card'"
          action="#"
          :auto-upload="false"
          @change="Onchange"
          @success="updateAvatar"
          :tip="'请上传你的头像'"
        >
          <template #upload-button>
            <div
              v-if="loginUser.userAvatar"
              class="arco-upload-list-picture custom-upload-avatar"
            >
              <img :src="loginUser.userAvatar" />
              <div class="arco-upload-list-picture-mask">
                <IconEdit />
              </div>
              <a-progress
                v-if="file && file.status === 'uploading' && file.percent < 100"
                :percent="file.percent"
                type="circle"
                size="mini"
                :style="{
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translateX(-50%) translateY(-50%)',
                }"
              />
            </div>
            <div class="arco-upload-picture-card" v-else>
              <div class="arco-upload-picture-card-text">
                <IconPlus />
                <div style="margin-top: 10px; font-weight: 600">Upload</div>
              </div>
            </div>
          </template>
        </a-upload>
      </a-space>
    </div>
  </a-modal>
</template>

<style scoped>
.left-page {
  margin: auto;
  padding-left: 120px;
}

.avatar {
  height: 100px;
  width: 100px;
  margin: auto;
  color: #74c0fc;
  border-radius: 5ch;
  border: 3px solid orange;
}

.right-page {
}
</style>
